<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>17-v-on的方式注册事件</title>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <!-- vue当中注册事件要使用指令v-on:事件名称="事件处理程序" -->
    <input type="button" value="按钮" v-on:click="btnClick">
    <!-- 以下是v-on的简写形式 -->
    <button @click="btnClick($event)">按钮</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        // vue中的事件处理程序，要写在vue实例对象中的methods属性当中 
        btnClick(a) {
          console.log(123)
          console.log(a)
          // console.log(this)
        }
      }
    })

    /**
     * vue中的事件注册
     *  1. 当触发事件时，没有参数的话，可以不用加小括号
     *  2. 加了小括号也没有问题，这个是事件处理程序没有参数的时候
     *  3. 当事件处理程序中有一个参数的时候，如果不加小括号，此时的这个参数表示事件对象，如果加了小括号而没有传参，此参数则是undefined
     *  4. 如果触发事件时，事件处理程序只有一个参数的话，要想正常传参，只此参数是事件对象的话，在小括号内要传入特有的事件对象 $event
     * 
     *  
     * 
     * 
     **/ 
  </script>
</body>
</html>